<template>
  <!-- 页面主容器 -->
  <div class="container">
      <!-- 使用 Element UI 的栅格系统创建两列布局 -->
      <el-row type="flex" justify="space-between">
          
          <!-- 左侧菜单栏 -->
          <div class="menus-wrapper">
              <div class="menus-body" @mouseleave="handleMenuLeave()">
                  <!-- 一级菜单 -->
                  <div class="menus">
                      <!-- 遍历城市数据，创建一级菜单项 -->
                      <div class="menu-item" :class="{active: currentMenu === index}" v-for='(item, index) in cities' :key="index" @mouseenter="handleMenuEnter(index)">
                          <span>{{item.type}}</span>
                      </div>
                  </div>

                  <!-- 二级菜单 -->
                  <div class="sub-menus" v-if="showSubMenu">
                      <ul>
                          <!-- 遍历当前城市数据，创建二级菜单项 -->
                          <li v-for="(item, index) in currentCities" :key="index">
                              <!-- 使用 Nuxt Link 导航到城市详情页面 -->
                              <nuxt-link :to="`/post?city=${item.city}`">
                                  <i>{{index + 1}}</i>
                                  <strong>{{item.city}}</strong>
                                  <span>{{item.desc}}</span>
                              </nuxt-link>
                          </li>
                      </ul>
                  </div>
              </div>

              <!-- 右侧推荐栏 -->
              <div class="aside-recommend">
                  <h4 class="aside-title">推荐城市</h4>
                  <nuxt-link to="#" class="aside-recommend-item">
                      <img src="/images/pic_sea.jpeg"/>
                  </nuxt-link>
              </div>
          </div>

          <!-- 右侧内容栏 -->
          <div class="post-wrapper">
              <!-- 搜索栏 -->
              <div class="search-wrapper">
                  <el-row type="flex" justify="space-between" align="middle" class="search-bar">
                      <!-- 输入框绑定城市搜索关键字 -->
                      <input type="text" placeholder="请输入想去的地方，比如：'广州'" v-model="city" @keyup.enter="handleSearch">
                      <!-- 点击搜索图标触发搜索事件 -->
                      <i class="el-icon-search" @click="handleSearch"></i>
                  </el-row>

                  <!-- 搜索推荐词汇 -->
                  <div class="search-recommend">
                      推荐：
                      <!-- 遍历推荐城市，点击触发搜索事件 -->
                      <span v-for="(item, index) in [`广州`, `上海`, `北京`]" :key="index" @click="handleSearch(item)">
                          {{item}}
                      </span>
                  </div>
              </div>

              <!-- 文章标题及写游记按钮 -->
              <el-row type="flex" justify="space-between" align="middle" class="post-title">
                  <h4>推荐攻略</h4>
                  <el-button type="primary" icon="el-icon-edit" @click="$router.push(`/post/create`)">
                      写游记
                  </el-button>
              </el-row>

              <!-- 文章列表 -->
              <div class="post-list">
                  <!-- 遍历文章数据，渲染文章卡片组件 -->
                  <postCard v-for="(item, index) in posts" :key="index" :data="item"></postCard>
              </div>

              <!-- 分页组件 -->
              <el-row type="flex" justify="center" style="margin-top:10px;">
                  <el-pagination
                      v-if="total"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="Math.floor(start / limit) + 1"
                      :page-sizes="[3, 5, 10, 15]"
                      :page-size="limit"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                  </el-pagination>
              </el-row>
          </div>
      </el-row>
  </div>
</template>

<script>
// 引入文章卡片组件
import postCard from "@/components/post/postCard";
export default {
  // 组件的数据
  data() {
      return {
          currentMenu: 999, // 当前选中的一级菜单索引
          showSubMenu: false, // 是否显示二级菜单

          posts: [], // 文章数据
          cities: [], // 城市数据
          currentCities: [], // 当前选中一级菜单的二级菜单数据

          // 过滤条件
          city: this.$route.query.city || "", // 当前搜索的城市关键字
          start: +this.$route.query.start || 0, // 起始位置
          limit: +this.$route.query.limit || 3, // 每页显示数量
          total: 0 // 文章总数
      };
  },
  // 注册文章卡片组件
  components: {
      postCard
  },
  // 监听路由变化
  watch: {
      $route(value) {
          const { city } = value.query;
          if (this.city && city !== this.city) {
              this.start = 0;
              this.city = city;
              this.getPost();
          }
      }
  },
  // 组件的方法
  methods: {
      // 处理一级菜单进入事件
      handleMenuEnter(index) {
          this.currentMenu = index;
          this.showSubMenu = true;
          this.currentCities = this.cities[index].children;
      },

      // 处理一级菜单离开事件
      handleMenuLeave() {
          this.showSubMenu = false;
          this.currentMenu = 999;
      },

      // 获取文章数据
      getPost() {
          // 构建查询参数
          const queryJson = {
              ...this.$route.query,
              start: this.start,
              limit: this.limit
          };

          // 添加城市过滤条件
          if (this.city) {
              queryJson.city = this.city;
          }

          // 替换路由
          this.$router.replace({
              path: "/post",
              query: queryJson
          });

          // 发起 API 请求获取文章数据
          const { api } = this.$store.state;
          const params = {
              _start: this.start,
              _limit: this.limit
          };

          // 添加城市过滤条件
          if (this.city) {
              params.city = this.city;
          }

          this.$axios({
              url: api.GET_POST,
              params
          }).then(res => {
            const { data, total } = res.data;
                this.posts = data;
                this.total = total;
            });
        },

        // 处理每页显示数量变化事件
        handleSizeChange(value) {
            this.limit = value;
            this.start = 0;
            this.getPost();
        },

        // 处理当前页码变化事件
        handleCurrentChange(value) {
            this.start = this.limit * (value - 1);
            this.getPost();
        },

        // 搜索方法
        handleSearch(value) {
            // 如果传入的是字符串，则更新城市关键字
            if (typeof value === "string") {
                this.city = value;
            }

            this.start = 0;
            this.getPost();
        },

        // 获取城市数据
        getCities() {
            const { api } = this.$store.state;

            this.$axios({
                url: api.POST_CITIES,
            }).then(res => {
                const { data } = res.data;
                this.cities = data;
            });
        }
    },

    // 组件挂载后执行的生命周期钩子
    mounted() {
        // 初始化获取文章数据和城市数据
        this.getPost();
        this.getCities();
    }
}
</script>
  
  <style scoped lang="less">
    .container{
      width:1000px;
      margin:0 auto;
      padding:20px 0;
    }
  
    /* 菜单栏 */
    .menus-wrapper{
      position: relative;
      width:260px;
      z-index:2;
  
      .menus{
        width:260px;
        border:1px #ddd solid;
        border-right:none;
        border-bottom:none;
        box-shadow: 0 0 1px #f5f5f5;
        z-index:2;
      }
  
      .menu-item{
        height:40px;
        line-height: 40px;
        border-bottom:1px #ddd solid;
        border-right:1px #ddd solid;
        padding:0 20px;
        font-size:14px;
        position: relative;
        z-index: 2;
  
        &:after{
          display: block;
          content:"";
          width:10px;
          height:10px;
          border-right:1px #999 solid;
          border-top:1px #999 solid;
          transform: rotate(45deg);
          position: absolute;
          right:20px;
          top:15px;
        }
  
        &.active{
          border-right-color: #fff;
          color:orange;
  
          &:after{
            border-right-color: orange;
            border-top-color: orange;
          }
        }
      }
  
      .sub-menus{
        position: absolute;
        left:260px;
        top:0;
        width:350px;
        padding:10px 20px;
        box-sizing: border-box;
        background: #fff;
        border: 1px #ddd solid;
  
        ul li{
          font-size: 14px;
          line-height: 1.5;
  
          *{
            vertical-align: middle;
          }
  
          i {
            color:orange;
            font-size: 24px;
            font-style: italic;
          }
  
          strong{
            margin:0 10px;
            color: orange;
            font-weight: normal;
            &:hover{
              text-decoration: underline;
            }
          }
  
          span{
            color:#999;
            &:hover{
              text-decoration: underline;
            }
          }
        }
      }
    }
  
    /* 侧边栏推荐 */
    .aside-recommend{
      margin-top: 20px;
      
      .aside-title{
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: 1px #ddd solid;
        margin-bottom:10px;
      }
  
      .aside-recommend-item{
        img{
          width:100%;
          display: block;
        }
      }
    }
  
    /*内容*/
    .post-wrapper{
      width:700px;
    }
  
    /*搜索栏*/
    .search-wrapper{
      .search-bar{
        width:100%;
        box-sizing: border-box;
        height:40px;
        line-height: 40px;
        border:3px orange solid;
  
        input{
          flex:1;
          padding:0 20px;
          line-height: 40px;
          outline: none;
          border:none;
          background:none;
        }
  
        i{
          font-size: 24px;
          color:orange;
          font-weight: bold;
          margin-right:10px;
        }
      }
  
      .search-recommend{
        padding:10px 0;
        font-size: 12px;
        color:#666;
  
        span{
          margin-right:5px;
          &:hover{
            color:orange;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  
    /* 标题 */
    .post-title{
      padding-bottom:10px;
      border-bottom:1px #eee solid;
      position: relative;
  
      h4{
        font-weight: normal;
        font-size: 18px;
        color:orange;
  
        &:after{
          display:block;
          content: "";
          width:72px;
          height:2px;
          background:orange;
          position: absolute;
          bottom:0;
          left:0;
        }
      }
    }
  </style>
  